<!DOCTYPE html>
<html lang="en" xmlns:float="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>身份证信息查询与录入</title>
    <style type="text/css">
        /*.div-inline {*/
        /*width: 150px;*/
        /*height: 40px;*/
        /*float: left;*/
        /*boder: 2px solid #fa6859;*/
        /*}*/

        /*.in {*/
        /*width: 300px;*/
        /*height: 40px;*/
        /*float: left;*/
        /*}*/

        /*.other {*/
        /*width: 450px;*/
        /*height: 40px;*/
        /*float: left;*/
        /*}*/

        /*.table {*/
        /*width: 1200px;*/
        /*float: left;*/
        /*}*/

        .big-li {
            float: left;
            width: 60px;
            list-style: none
        }

        .little-li {
            float: left;
            width: 30px;
            list-style: none
        }
    </style>
    <script type="application/javascript">
        function method() {
            var ele = document.getElementById(123);
            ele.style.display = "none";
        }
    </script>
    <!--<link rel="stylesheet" type="text/css" href="">-->
    <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">

</head>
<body>
<div style=" position:absolute ;margin: 0px 100px 100px  100px ">
    <h4>查询条件</h4>
    <div style="border: dotted 1px ; width: 800px">
        <div>
            <select name="证件" style="width: 100px;">
                <option>身份证</option>
                <option>驾驶证</option>
                <option>其他</option>
            </select>
            <input width="200px">
            <p/>
            <select name="省份" style="width: 100px">
                <option>广东</option>
                <option>江苏</option>
                <option>浙江</option>
                <option>北京</option>
                <option>等等</option>
            </select>
            <input width="200px">
            <button class="btn btn-small btn-info" type="button" onclick="method()">查询</button>
        </div>
    </div>
    <p></p>
    <div id="123" style="border: dotted 1px ; width: 800px;">
        <p></p>
        <p></p>
        <h5>证件信息</h5>
        <button class="btn btn-small btn-info" type="button" style="float: right;width: 100px;">新增证件</button>
        <div>
            证件类型<input placeholder="Type something..." type="text" style="margin-bottom: 0px; width: 200px">
            证件号码<input placeholder="Type something..." style="margin-bottom: 0px; width: 340px" type="text">
            <p/>
        </div>

        <div>
            证件地址<input style="width: 600px">
            <p/>
            <p/>
            客户名称<input style="width: 600px">
            <p/>
            客户地址<input style="width: 600px">
            <p/>
        </div>
        <div>
            号码数量<input style="width: 160px">
            清单数量<input style="width: 160px">
            redis数量<input style="width: 160px">
        </div>
        <div>
            <button class="btn btn-small btn-info" type="button">更新号码数量</button>
            <button class="btn btn-small btn-info" type="button">修改证件</button>
        </div>
    </div>
    <p></p>
    <div style="border: dotted 1px ; width: 800px">
        <h5>证号信息</h5>
        <button class="btn btn-small btn-info" type="button" style="float: right;width: 100px;">新增证号</button>
        <table class="table table-bordered" contenteditable="true" style="width:800px;">
            <thead>
            <tr>
                <th>移动号码</th>
                <th>号码归属</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr class="success">
                <td>18911110000</td>
                <td>湖南</td>
                <td>待生效</td>
                <td>
                    <button class="btn btn-small btn-info" type="button">修改</button>
                    <button class="btn btn-small btn-info" type="button">解除</button>
                </td>
            </tr>
            <tr class="error">
                <td>13232432342</td>
                <td>上海</td>
                <td>生效</td>
                <td>
                    <button class="btn btn-small btn-info" type="button">修改</button>
                    <button class="btn btn-small btn-info" type="button">解除</button>
                </td>
            </tr>
            <tr class="warning">
                <td>18911110000</td>
                <td>湖南</td>
                <td>待生效</td>
                <td>
                    <button class="btn btn-small btn-info" type="button">修改</button>
                    <button class="btn btn-small btn-info" type="button">解除</button>
                </td>
            </tr>
            <tr class="info">
                <td>18911110000</td>
                <td>湖南</td>
                <td>待生效</td>
                <td>
                    <button class="btn btn-small btn-info" type="button">修改</button>
                    <button class="btn btn-small btn-info" type="button">解除</button>
                </td>
            </tr>
            </tbody>
        </table>


        <div>
            <div class="pagination">
                <ul contenteditable="true">
                    <li class="big-li"><a href="#">上一页</a></li>
                    <li class="little-li"><a href="#">1</a></li>
                    <li class="little-li"><a href="#">2</a></li>
                    <li class="little-li"><a href="#">3</a></li>
                    <li class="little-li"><a href="#">4</a></li>
                    <li class="little-li"><a href="#">5</a></li>
                    <li class="big-li"><a href="#">下一页</a></li>
                </ul>
            </div>
            <canvas></canvas>
        </div>
    </div>
</div>

<script>
    document.addEventListener('touchmove', function (e) {
        e.preventDefault()
    });
    var c = document.getElementsByTagName('canvas')[0],
            x = c.getContext('2d'),
            pr = window.devicePixelRatio || 1,
            w = window.innerWidth,
            h = window.innerHeight,
            f = 90,
            q,
            m = Math,
            r = 0,
            u = m.PI * 2,
            v = m.cos,
            z = m.random;
    c.width = w * pr;
    c.height = h * pr;
    //    c.width=1600;
    //    c.height=600;
    x.scale(pr, pr);
    x.globalAlpha = 0.6;
    function i() {
        x.clearRect(0, 0, w, h);
        q = [{x: 0, y: h * .7 + f}, {x: 0, y: h * .7 - f}];
        while (q[1].x < w + f) d(q[0], q[1])
    }
    function d(i, j) {
        x.beginPath();
        x.moveTo(i.x, i.y);
        x.lineTo(j.x, j.y);
        var k = j.x + (z() * 2 - 0.25) * f,
                n = y(j.y);
        x.lineTo(k, n);
        x.closePath();
        r -= u / -50;
        x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).toString(16);
        x.fill();
        q[0] = q[1];
        q[1] = {x: k, y: n}
    }
    function y(p) {
        var t = p + (z() * 2 - 1.1) * f;
        return (t > h || t < 0) ? y(p) : t
    }
    document.onclick = i;
    document.ontouchstart = i;
    i();
</script>
</body>
</html>